<template>
  <div>
    <form v-if="type === 'login'">
      <div class="container">
        <label>
          <input type="text" placeholder="账号1">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="密码">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="验证码">
        </label>
      </div>
    </form>
    <form v-if="type === 'email'">
      <div class="container">
        <label>
          <input type="text" placeholder="邮箱2">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="密码">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="验证码">
        </label>
      </div>
    </form>
    <form v-if="type === 'password'">
      <div class="container">
        <label>
          <input type="text" placeholder="其他3">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="密码">
        </label>
      </div>
      <div class="container">
        <label>
          <input type="text" placeholder="验证码">
        </label>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'commonForm',
  data () {
    return {
      type: 'login'
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
</style>
